<template>
  <basic-container>
    <div class="page-contianer">
      <el-tabs type="border-card" class="chart-tab tab-font" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="产品" name="product"></el-tab-pane>
        <el-tab-pane label="产线" name="productLine"></el-tab-pane>
        <el-tab-pane label="车间" name="workshop"></el-tab-pane>
        <el-tab-pane label="工厂" name="factory"></el-tab-pane>
        <avue-form ref="form" :option="option" v-model="form">
          <template slot="containLabel"><span style="color: #f56c6c; margin-right: 4px">*</span>{{ productionMap[activeName] }}: </template>
          <template slot="contain">
            <el-input :class="{ 'invalid-input': isValid }" placeholder="请选择产品" readonly="true" disabled v-model="form.product" v-if="activeName === 'product'">
              <el-button slot="append" icon="el-icon-search" @click="openCommonModal('partNoModal')"></el-button>
            </el-input>
            <el-input :class="{ 'invalid-input': isValid }" placeholder="请选择车间" readonly="true" disabled v-model="form.workshopName" v-if="activeName === 'workshop'">
              <el-button slot="append" icon="el-icon-search" @click="openCommonModal('workshop')"></el-button>
            </el-input>
            <el-input :class="{ 'invalid-input': isValid }" placeholder="请选择产线" readonly="true" disabled v-model="form.lineName" v-if="activeName === 'productLine'">
              <el-button slot="append" icon="el-icon-search" @click="openCommonModal('line')"></el-button>
            </el-input>
            <span class="invalid-span" v-if="isValid">{{ validateMsg }}</span>
          </template>
          <template slot="btn">
            <div style="width: 100%; text-align: right">
              <el-button type="primary" size="small" class="el-icon-search" @click="handleSubmit">搜索 </el-button>
              <el-button size="small" class="el-icon-delete" @click="handleCancel">清空</el-button>
            </div>
          </template>
        </avue-form>
        <div class="main-content">
          <el-row :gutter="20">
            <el-col :span="24">
              <chart-view class="chart-content" :chart-option="chartOption" :auto-resize="true" width="100%" @click="handleClickChart" />
              <avue-crud :option="tableOption" :table-loading="loading" :data="data" :page.sync="tablePage" @current-change="currentChange" @size-change="sizeChange" ref="crud">
                <template slot="menuRight">
                  <el-button type="warning" size="small" icon="el-icon-download" @click="handleExport">导出 </el-button>
                </template>
                <template slot="menu" slot-scope="{ row }">
                  <el-button type="text" size="small" icon="el-icon-view" @click="handleViewDetail(row)">详 情 </el-button>
                </template>
                <template slot="menuRight" v-if="searchTime">
                  <div class="search-time">
                    <span> 当前查询时间:{{ searchTime }} </span>
                  </div>
                </template>
              </avue-crud>
            </el-col>
          </el-row>
        </div>
      </el-tabs>

      <export-comp ref="exportComp" :page-api-url="pageApiUrl" :option="tableOption" :page="tablePage" :query="exprotParams" file-name="产品直通率报表"> </export-comp>
      <export-comp
        ref="detailExportComp"
        :page-api-url="detailPageApiUrl"
        :option="detailOption"
        :page="detailTablePage"
        :query="detailExprotParams"
        file-name="产品直通率详情报表"
      >
      </export-comp>
      <el-dialog title="详情" :visible.sync="dialogVisible" width="70%" append-to-body>
        <div class="sail-header-dialog-content">
          <avue-form ref="detailForm" :option="detailOption" v-model="detailForm">
            <template slot="group1Header">
              <div class="custom-title"><i class="el-icon-vertical-bar"></i> {{ group1Header }}</div>
            </template>
            <template slot="group2Header">
              <div class="custom-title"><i class="el-icon-vertical-bar"></i> {{ group2Header }}</div>
            </template>
            <template slot="goalFpyForm" slot-scope="{ row }">
              <span>{{ row.goalFpy + '%' }}</span>
            </template>
            <template slot="table">
              <avue-crud
                :option="detailTableOption"
                :table-loading="deatailLoading"
                :data="detailData"
                :page.sync="detailTablePage"
                @current-change="currentDetailChange"
                @size-change="sizeDetailChange"
                ref="crud"
              >
                <template slot="menuRight">
                  <el-button type="warning" size="small" icon="el-icon-download" @click="handleDetailExport">导出 </el-button>
                </template>
              </avue-crud>
            </template>
          </avue-form>
        </div>
      </el-dialog>
    </div>
    <common-modal-template ref="commonModalTemplate" :option="selectOption" @getSelectedRows="getSelectedRows" :key="timer" @newKey="newKey"></common-modal-template>
  </basic-container>
</template>

<script>
import ChartView from '@/components/chart/index.vue';
import moment from 'moment';
import {
  getChartData,
  getDetailFactoryTableList,
  getDetailLineTableList,
  getDetailProductTableList,
  getDetailWorkshopTableList,
  getFactoryTableList,
  getLineTableList,
  getProductTableList,
  getWorkshopTableList
} from '@/api/report/productPasstRateReport';
import {
  detailOption,
  detailTableOption,
  getDetailTableOption,
  getOption,
  getTableOption,
  tableOption,
  valiDateFlied,
  getFormOption
} from '@/views/report/productPasstRateReport.js';
import exportComp from '@/components/export-comp';
import commonModalTemplate from '@/components/common-modal-template/common-modal-template';

export default {
  name: 'productPasstRateReport',
  components: {
    ChartView,
    exportComp,
    commonModalTemplate
  },
  data() {
    return {
      detailOption,
      detailTablePage: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      deatailLoading: false,
      detailData: [],
      detailForm: {},
      detailTableOption,
      isValid: false,
      exprotParams: {},
      detailExprotParams: {},
      selectOption: {},
      modalName: '',
      timer: new Date().getTime(),
      // currentProgress: 0,
      intervalId: null,
      dialogVisible: false,
      selectRow: {},
      activeName: 'product',
      search: {
        workshopName: '',
        workshopList: []
      },
      searchTime: '',
      productionMap: {
        workshop: '车间',
        product: '产品',
        team: '班组',
        productLine: '产线'
      },
      params: {
        startDate: '',
        endDate: '',
        workshopName: '',
        statisticsTimeDimension: 'DAY'
      },
      form: {
        examineDate: this.getDefaultTime()
      },
      loading: false,
      data: [],
      tableOption,
      tablePage: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      selectName: '',
      option: getOption(this),
      chartOption: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            let result = params[0].axisValueLabel + '<br/>';
            params.forEach(function (item) {
              result += item.marker + item.seriesName + ': ' + item.data + '%<br/>';
            });
            return result;
          },
          textStyle: {
            rich: {
              a: {
                color: '#fff',
                backgroundColor: '#333',
                padding: [5, 10],
                borderRadius: 4
              }
            }
          }
        },
        legend: {
          // top: '10%',
          data: ['实际直通率', '目标直通率']
          // tooltip: {
          //   show: true
          // }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [],
          name: '日期',
          axisLabel: {
            rotate: 90
          }
        },
        yAxis: {
          type: 'value',
          name: '达成率',
          min: 0,
          max: 100,
          nameLocation: 'middle',
          nameTextStyle: {
            fontSize: 14,
            align: 'center',
            verticalAlign: 'middle',
            lineHeight: 20,
            formatter: function (value) {
              return value.split('').join('\n'); // 将文字从上到下排列
            }
          },
          nameGap: 80, // 名称与轴线的间距
          axisLabel: {
            formatter: '{value}%'
          }
        },
        series: []
      }
    };
  },
  mounted() {
    // this.getOptionList('workshop');
  },
  computed: {
    validateMsg() {
      return '请选择' + this.productionMap[this.activeName];
    },
    group1Header() {
      return this.activeName === 'product' ? '工单信息' : this.activeName === 'productLine' ? '产线信息' : '车间信息';
    },
    group2Header() {
      return this.activeName === 'product' ? '工段详情' : '工单详情';
    },
    pageApiUrl() {
      const urlMap = {
        product: 'mes-product/stat-fpy-wo/page',
        workshop: 'mes-product/stat-fpy-workshop/page',
        productLine: 'mes-product/stat-fpy-line/detail-page',
        factory: 'mes-product/stat-fpy-factory/page'
      };
      return urlMap[this.activeName];
    },
    detailPageApiUrl() {
      const urlMap = {
        product: 'mes-product/stat-fpy-wo/page/section',
        workshop: 'mes-product/stat-fpy-workshop/page/workOrder',
        productLine: 'mes-product/stat-fpy-line/detail-page',
        factory: 'mes-product/stat-fpy-factory/page/workOrder'
      };
      return urlMap[this.activeName];
    }
  },
  methods: {
    newKey() {
      this.timer = new Date().getTime();
    },
    async onLoad() {
      // const startTime = new Date().getTime();
      // let endTime;
      let data;
      this.loading = true;
      const params = this.getParams();
      const pageParams = {
        current: this.tablePage.currentPage,
        size: this.tablePage.pageSize,
        statisticalDate: this.selecName
      };
      try {
        const res = await this.getTableData(Object.assign(params, pageParams));
        data = (res.data.data || {}).records || [];
        this.tablePage.total = res.data.data.total;
        this.data = data;
        // this.endTime = new Date().getTime();
      } catch (e) {
        // endTime = new Date().getTime();
        this.setChartOption([]);
        this.data = [];
      } finally {
        this.loading = false;
      }
      // const seconds = endTime - startTime;
      // this.startProgress(data, seconds);
    },
    sizeChange(pageSize) {
      this.tablePage.pageSize = pageSize;
      this.onLoad();
    },
    currentChange(currentPage) {
      this.tablePage.currentPage = currentPage;
      this.onLoad();
    },

    sizeDetailChange(pageSize) {
      this.detailTablePage.pageSize = pageSize;
      this.onDetailLoad();
    },
    currentDetailChange(currentPage) {
      this.detailTablePage.currentPage = currentPage;
      this.onDetailLoad();
    },

    // 按照策略模式根据 不同的activeName 获取不同的表格数据 返回一个可以调用的方法
    getTableData(params) {
      const tableDataMap = {
        product: getProductTableList,
        workshop: getWorkshopTableList,
        productLine: getLineTableList,
        factory: getFactoryTableList
      };
      return tableDataMap[this.activeName](params);
    },
    getDetailTableData(params) {
      const tableDataMap = {
        product: getDetailProductTableList,
        workshop: getDetailWorkshopTableList,
        productLine: getDetailLineTableList,
        factory: getDetailFactoryTableList
      };
      return tableDataMap[this.activeName](params);
    },
    getDetailParams() {
      return {
        statisticalDate: this.selectRow.statisticalDate,
        timeDimension: this.form.statisticsTimeDimension,
        ...this.getDetailQueryParams(this.activeName)
      };
    },

    getDetailQueryParams(type) {
      let obj = {};
      switch (type) {
        case 'workshop':
          obj.workshopId = this.form.workshopId;
          break;
        case 'productLine':
          obj.lineId = this.form.lineId;
        case 'product':
          obj.workOrderNo = this.selectRow.workOrderNo;
          break;
      }
      return obj;
    },
    async onDetailLoad() {
      try {
        this.deatailLoading = true;
        const params = this.getDetailParams();
        const res = await this.getDetailTableData(params);
        const data = (res.data.data || {}).records;
        this.detailTablePage.total = res.data.data.total;
        this.detailData = data;
      } catch (e) {
        this.detailData = [];
      } finally {
        this.deatailLoading = false;
      }
    },
    handleSubmit() {
      this.selectName = '';

      this.data = [];
      const valid = valiDateFlied(this.form, this.activeName);
      if (!valid) {
        this.isValid = true;
        return;
      }
      this.$refs.form.validate((valid, done) => {
        if (valid) {
          this.getChartData();
          if (this.form.statisticsTimeDimension !== 'DAY') {
            this.onLoad();
          }
          done();
        }
      });
    },
    getParams() {
      const timeDimension = this.form.statisticsTimeDimension;
      const queryParams = this.getQueryParams(this.activeName);
      const timeArr = this.getTime(timeDimension);
      const baseParams = {
        timeDimension, //时间维度
        startTime: timeArr[0],
        endTime: timeArr[1]
      };
      return {
        ...baseParams,
        ...queryParams
      };
    },

    getTime(type) {
      if (type === 'DAY') {
        return this.form.examineDate;
      } else if (type === 'WEEK') {
        const startWeek = this.formatDateToYearWeek(this.form.weekStart);
        const endWeek = this.formatDateToYearWeek(this.form.weekEnd);
        return [startWeek, endWeek];
      } else {
        const startMonth = this.formatDateToYearMonth(this.form.month[0]);
        const endMonth = this.formatDateToYearMonth(this.form.month[1]);
        return [startMonth, endMonth];
      }
    },

    formatDateToYearWeek(dateString) {
      // 使用 moment 库解析日期字符串
      let date = moment(dateString);
      // 获取年份
      let year = date.format('YYYY');
      // 获取周数，ISO 标准下，星期一作为一周的第一天
      let week = date.isoWeek();
      // 格式化周数，确保周数是两位数
      let formattedWeek = week < 10 ? '0' + week : week;
      // 返回格式化后的字符串
      return year + '-' + formattedWeek;
    },
    formatDateToYearMonth(dateString) {
      // 使用 moment 库解析日期字符串
      let date = moment(dateString, 'YYYY-MM-D');
      // 获取年份
      let year = date.format('YYYY');
      // 获取月份，格式化为两位数
      let month = date.format('MM');
      // 返回格式化后的字符串
      return year + '-' + month;
    },
    getQueryParams(type) {
      let obj = {};
      switch (type) {
        case 'workshop':
          obj.workshopId = this.form.workshopId;
          break;
        case 'productLine':
          obj.lineId = this.form.lineId;
        case 'product':
          obj.productPartNo = this.form.partNo;
          break;
      }
      return obj;
    },
    getChartAjaxType() {
      const typeMap = {
        product: 'wo',
        workshop: 'workshop',
        productLine: 'line',
        factory: 'factory'
      };
      return typeMap[this.activeName];
    },
    async getChartData() {
      let data = [];
      try {
        const params = this.getParams();
        const type = this.getChartAjaxType();
        const res = await getChartData(type, params);
        data = res.data.data || [];
      } catch (e) {
        data = [];
        this.data = [];
      }
      this.setChartOption(data);
    },
    // startProgress(data, seconds = 500) {
    //   const time = seconds < 500 ? 500 : seconds;
    //   const setInterTime = time / 10;
    //   this.intervalId = setInterval(() => {
    //     if (this.currentProgress < 100) {
    //       this.currentProgress += 10;
    //     } else {
    //       clearInterval(this.intervalId);
    //       this.dialogVisible = false;
    //       this.data = data;
    //     }
    //   }, setInterTime);
    // },
    setChartOption(data = []) {
      let xAxisData = [];
      let goalFpyArr = [];
      let actualFpyArr = [];
      data.forEach((item) => {
        xAxisData.push(item.statisticalDate);
        let goalFpy = item.goalFpy ? Number(item.goalFpy) : 0;
        let actualFpy = item.actualFpy ? Number(item.actualFpy) : 0;
        goalFpyArr.push(goalFpy);
        actualFpyArr.push(actualFpy);
      });
      const series = [
        {
          type: 'bar',
          data: actualFpyArr,
          name: '实际直通率',
          barWidth: '20',
          itemStyle: {
            color: '#abd78f' // 设置柱子的颜色
          }
        },
        {
          type: 'line',
          data: goalFpyArr,
          name: '目标直通率',
          lineStyle: {
            color: '#89a6d8', // 设置目标线的颜色
            width: 2
          }
        }
      ];
      const xAxis = {
        type: 'category',
        boundaryGap: false,
        data: xAxisData,
        axisLabel: {
          rotate: 45
        }
      };
      this.setChartTitle();
      this.$set(this.chartOption, 'xAxis', xAxis);
      this.$set(this.chartOption, 'series', series);
    },
    setChartTitle() {
      let title = '';
      if (this.activeName === 'product') {
        title = `产品编号：${this.form.product ? this.form.product : ''} 产品编码：${this.form.partNo ? this.form.partNo : ''}`;
      } else if (this.activeName === 'workshop') {
        title = `车间名称：${this.form.workshopName ? this.form.workshopName : ''}`;
      } else if (this.activeName === 'productLine') {
        title = `产线名称：${this.form.lineName ? this.form.lineName : ''}`;
      }
      const subTitle = {
        subtext: title,
        left: '10%'
      };
      this.$set(this.chartOption, 'title', subTitle);
    },
    getDefaultTime() {
      let defaultStartTime = this.$moment(new Date()).subtract(6, 'days').format('yyyy-MM-DD');
      let defaultEndTime = this.$moment(new Date()).subtract(0, 'days').format('yyyy-MM-DD');
      return [defaultStartTime, defaultEndTime];
    },
    handleClick() {
      const contain = this.findObject(this.option.column, 'contain');
      const btn = this.findObject(this.option.column, 'btn');
      if (this.activeName === 'factory') {
        contain.display = false;
        btn.span = 24;
      }
      if (['workshop', 'productLine', 'product'].includes(this.activeName)) {
        contain.display = true;
        // if (this.form.statisticsTimeDimension === 'WEEK') {
        //   btn.span = 18;
        // } else {
        //   btn.span = 24;
        // }
        if (['workshop', 'productLine'].includes(this.activeName)) {
          const yAxis = {
            type: 'value',
            name: '达成率',
            min: 0,
            max: 100,
            splitNumber: 5,
            axisLabel: {
              formatter: '{value}%'
            }
          };
          this.$set(this.chartOption, 'yAxis', yAxis);
        } else {
          const yAxis = {
            type: 'value',
            name: '产品直通率',
            min: 0,
            max: 100,
            splitNumber: 5,
            axisLabel: {
              formatter: '{value}%'
            }
          };
          this.$set(this.chartOption, 'yAxis', yAxis);
        }
      }
      const colum = getTableOption(this.activeName);
      this.$set(this.tableOption, 'column', colum);
      this.$refs.crud.refreshTable();
      this.$refs.form.resetForm();
      this.$nextTick(() => {
        this.form = {
          statisticsTimeDimension: 'DAY',
          examineDate: this.getDefaultTime()
        };
      });

      this.data = [];
      this.setChartOption([]);
    },
    handleClickChart(value) {
      const name = value.name;
      if (name) {
        this.selecName = name;
        this.onLoad();
      }
    },
    handleCancel() {
      this.isValid = false;
      this.data = [];
      this.setChartOption([]);
      this.$refs.form.resetForm();
      this.form = {
        examineDate: this.getDefaultTime(),
        statisticsTimeDimension: 'DAY'
      };
    },
    getSelectedRows(rowData) {
      if (Object.keys(rowData).length) {
        this.isValid = false;
      }
      switch (this.modalName) {
        case 'partNoModal':
          this.form.partMasterId = rowData.id;
          this.form.product = rowData.name;
          this.form.partNo = rowData.partNo;
          break;
        case 'line':
          this.form.lineId = rowData.id;
          this.form.lineName = rowData.name;
          break;
        case 'workshop':
          this.form.workshopId = rowData.id;
          this.form.workshopName = rowData.name;
          break;
      }
    },
    async handleViewDetail(row) {
      this.selectRow = row;
      this.detailForm = {
        ...row,
        goalFpy: row.goalFpy ? row.goalFpy + '%' : '0%'
      };
      const formColumn = getFormOption(this.activeName);
      const detailTableColumn = getDetailTableOption(this.activeName);
      this.$set(this.detailOption.group[0], 'column', formColumn);
      this.$set(this.detailTableOption, 'column', detailTableColumn);
      await this.onDetailLoad();
      this.dialogVisible = true;
    },
    handleDetailExport() {
      this.detailExprotParams = this.getDetailParams();
      this.$refs.detailExportComp.visible = true;
    },
    handleExport() {
      if (this.selecName) {
        const params = this.getParams();
        const chartParams = {
          statisticalDate: this.selecName
        };
        this.exprotParams = Object.assign(params, chartParams);
        this.$refs.exportComp.visible = true;
      } else {
        this.$message.error('请点击图表查询数据后再导出');
      }
    },
    openCommonModal(type) {
      this.modalName = type;
      this.$refs.commonModalTemplate.showModal();
      this.selectOption = this.getSelectOption(type);
    },
    getSelectOption(type) {
      const selectionMap = {
        partNoModal: {
          modalTitle: '选择产品信息',
          url: '/api/mes-admin/part-master/page?semifinished=true',
          isPage: true,
          rowSelectionType: 'single',
          columnDefs: [
            {
              label: '类型',
              prop: 'categoryId',
              search: true,
              type: 'tree',
              dicUrl: '/api/mes-admin/part-category/tree',
              props: {
                label: 'title',
                value: 'id'
              },
              hide: true
            },
            {
              label: '类型',
              prop: 'categoryName'
            },
            {
              label: '编码',
              prop: 'partNo',
              search: true
            },
            {
              label: '名称',
              prop: 'name',
              search: true
            },
            {
              label: '型号',
              prop: 'partModel'
            },
            {
              label: '描述',
              prop: 'description'
            },
            {
              label: '版本',
              prop: 'revision'
            }
          ]
        },
        line: {
          modalTitle: '选择产线信息',
          url: '/api/mes-product/product/line/page',
          isPage: true,
          rowSelectionType: 'single',
          columnDefs: [
            {
              label: '产线名称',
              prop: 'name',
              search: true
            },
            {
              label: '产线编码',
              prop: 'code',
              rules: [
                {
                  required: true,
                  message: '请输入产线编码',
                  trigger: 'blur'
                }
              ]
            },
            {
              label: '所属车间',
              prop: 'workshopName'
            },
            {
              label: '产线状态',
              prop: 'status',
              type: 'select',
              dicData: [
                {
                  label: '待产',
                  value: '1'
                },
                {
                  label: '生产',
                  value: '2'
                },
                {
                  label: '停线',
                  value: '3'
                }
              ]
            }
          ]
        },
        workshop: {
          modalTitle: '选择车间信息',
          url: '/api/mes-product/workshop/page',
          isPage: true,
          rowSelectionType: 'single',
          columnDefs: [
            {
              label: '车间名称',
              prop: 'name',
              search: true
            },
            {
              label: '车间编号',
              prop: 'code',
              search: true
            }
          ]
        }
      };
      return selectionMap[type];
    },

    validateDateRange(rule, value, callback) {
      if (!this.form.month.length) {
        callback(new Error('请选择时间范围'));
      }
      // 假设有两个时间对象：startTime 和 endTime
      const startTime = moment(this.form.month[0], 'YYYY-MM');
      const endTime = moment(this.form.month[1], 'YYYY-MM');

      // 计算两个时间之间的月份差
      const monthDiff = endTime.diff(startTime, 'months');

      if (monthDiff <= 12) {
        callback();
      } else {
        // 月份差大于 12，超出范围
        callback(new Error('月范围不能超过 12 个月'));
      }
    },
    validateWeek(rule, value, callback) {
      const startTime = moment(this.form.weekStart, 'yyyy-MM-DD');
      const endTime = moment(this.form.weekEnd, 'yyyy-MM-DD');
      const monthDiff = endTime.diff(startTime, 'days');
      if (monthDiff >= 84) {
        callback(new Error('时间范围不能超过8周'));
      } else if (monthDiff < 0) {
        callback(new Error('结束周不能早于开始周'));
      } else {
        callback();
      }
    }
  }
};
</script>

<style scoped lang="scss">
.page-contianer {
  height: calc(100vh - 160px);
}

.main-content {
  height: 560px;
  overflow-y: scroll;
  overflow-x: hidden;
}

.chart-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  height: 40px;

  .workshopSelect {
    position: absolute;
    left: 100px;
  }

  .opration-div {
    position: absolute;
    left: 50px;
    font-size: 14px;
    color: #606266;
  }
}

.search-time {
  font-size: 14px;
  color: #606266;
  height: 40px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-end;

  span {
    display: inline-block;
  }
}

.tab-font {
  ::v-deep .el-tabs__item {
    color: #606266 !important;
    font-weight: bold;
  }
}

.invalid-input {
  position: relative;

  ::v-deep .el-input__inner {
    border: 1px solid #f56c6c;
  }
}

.invalid-span {
  color: #f56c6c;
  font-size: 12px;
  line-height: 1;
  padding-top: 4px;
  position: relative;
  top: -7px;
}

.chart-title {
  font-size: 16px;
  font-weight: bold;
  align-items: center;
  text-align: center;
}

.custom-title {
  font-size: 17px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #000000;
}
</style>
